import Action from './Action.js'
class Render {
  constructor (ctx, datas) {
    this.datas = datas
    this.ctx = ctx
    this.margin = 20
    this.top = 200
    this.spacing = 13
    this.dot = {}
    this.action = new Action(datas)
  }
  drawSquare() {
    this.ctx.fillStyle = '#CDC1BA'
    let edge = (this.ctx.canvas.width - this.margin * 2 - this.spacing * 5) / 4
    this.datas.forEach((row, rowIndex) => {
      row.forEach((colum, columIndex) => {
        let x = this.margin + this.spacing + (edge + this.spacing) * columIndex
        let y = this.top + this.spacing + (edge + this.spacing) * rowIndex
        this.ctx.fillStyle = '#CDC1BA'
        if (colum === 2) {
          this.ctx.fillStyle = '#f29ef3'
        } else if (colum === 4) {
          this.ctx.fillStyle = '#F2B179'
        } else if (colum === 8) {
          this.ctx.fillStyle = '#f59563'
        } else if (colum === 16) {
          this.ctx.fillStyle = '#db7b34'
        } else if (colum === 32) {
          this.ctx.fillStyle = '#db5a34'
        } else if (colum === 64) {
          this.ctx.fillStyle = '#d14c2d'
        }
        this.ctx.fillRect(x, y, edge, edge)
        if (colum > 0) {
          this.ctx.fillStyle = '#FFF'
          this.ctx.font = '34px 微软雅黑'
          this.ctx.textAlign = 'center'
          this.ctx.fillText(colum, x + edge / 2, y + (edge - 34) / 2 + 34)
        }
      })
    })
  }
  drawBg () {
    let edge = this.ctx.canvas.width - this.margin * 2
    this.ctx.fillStyle = '#FAF8EF'
    this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
    this.ctx.fillStyle = '#BBADA0'
    this.ctx.fillRect(this.margin, this.top, edge, edge)
    this.ctx.lineWidth = 10
    this.ctx.lineJoin = 'bevel'
    this.ctx.strokeStyle = '#BBADA0'
    this.ctx.strokeRect(this.margin, this.top, edge, edge)
  }
  listen () {
    this.ctx.canvas.addEventListener('touchstart', (e) => {
      let touch = e.changedTouches[0]
      this.dot.x = touch.clientX
      this.dot.y = touch.clientY
    })
    this.ctx.canvas.addEventListener('touchend', (e) => {
      let touch = e.changedTouches[0]
      let endX = touch.clientX
      let endY = touch.clientY
      if (Math.abs(endX - this.dot.x) > Math.abs(endY - this.dot.y)) {
        if (endX > this.dot.x ){
          //右
          this.action.rightAction()
        }else {
          this.action.leftAction()
        }
      } else {
        if (endY > this.dot.y) {
          this.action.downAction()
        } else {
          this.action.upAction()
        }
      }
      this.action.insertNumber()
      console.log(this.action.same)
      if(this.action.morepositions.length === 0 && this.action.same === false) {
        wx.showModal({
          title: '温馨提示',
          content: 'game over!',
          showCancel: true,
          cancelText: '下次再战',
          confirmText: '再来一局',
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定');
              this.datas = [
                [0, 2, 0, 0],
                [0, 0, 4, 0],
                [0, 8, 0, 0],
                [0, 0, 0, 0]
              ]
              this.drawBg()
              this.drawSquare()
              this.listen()
              this.action = new Action(this.datas)
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
          fail: (res) => { console.log('用户点击fail'); },
          complete: (res) => { console.log('用户点击complete'); },
        });
      }
      this.drawSquare()
    })
  }
}
export default Render